<script setup lang="ts">
import { ref } from 'vue';
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

const age = ref(10)
const timerId = setInterval(() => {
  age.value++
}, 1000)
/**
 * 只有两个比较重要一个是挂载阶段渲染数据后onMounted 和 销毁完成 onUnmounted 只会触发一次
 * onMounted 一般 发网络请求 和 操作DOM(标签已经渲染完成)
 * onUnounted 数据埋点 清除全局任务(定时器和延时器)
 */
// 1. 创建

// 2. 挂载
onBeforeMount(() => {
  console.log(`onBeforeMount()-挂载前`)
})

onMounted(() => {
  // 一般 发网络请求 和 操作DOM(标签已经渲染完成)
  console.log(`onMounted()-挂载后`)
})

// 3. 更新
onBeforeUpdate(() => {
  console.log(`onBeforeUpdate()-数据更新了, 视图还没有更新`)
})

onUpdated(() => {
  console.log(`onUpdated()-数据更新了, 视图也更新`)
})

// 4. 销毁
onBeforeUnmount(() => {
  // 数据埋点 清除全局任务(定时器和延时器)
  clearInterval(timerId)
  console.log(`onBeforeUnmount()-组件销毁之前`)
})

onUnmounted(() => {
  console.log(`onUnmounted()-组件销毁之后`)
})
</script>

<template>
  <div class="box1">
    子组件---{{ age }}
  </div>
</template>

<style>
.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>